<template>
  <div class="main">
    <div class="login">
      <div class="title">{{ title }}</div>
      <div class="demo-input-suffix username">
        <el-input
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          v-model="form.username"
          clearable
        >
        </el-input>
      </div>
      <div class="demo-input-suffix username">
        <el-input placeholder="请输入密码" show-password v-model="form.password">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </div>
      <div class="username">
        <el-checkbox style="color:#000;margin-left: 2%;" v-model="checked">记住我</el-checkbox>
        <span class="forgot">忘记密码?</span>
      </div>
      <el-button @click="login()" style="width:81.5%;margin: 0 40px;" type="primary">{{title}}</el-button>
      <div class="register" @click="toRegister()">
        没有账号? 立即注册
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '../api/user';
export default {
  name: "Login",
  data() {
    return {
      title: "登录",
      form:{
        username:'',
        password:''
      },
      checked:true
    };
  },
    created() {
      if (localStorage.getItem("username") != null && localStorage.getItem("username").length > 0){
          this.form.username = localStorage.getItem("username");
      }
      if (localStorage.getItem("password") != null && localStorage.getItem("password").length > 0){
          this.form.password = localStorage.getItem("password");
      }
    },
    methods: {
    //登录
    login(){
      if (this.form.username == '' || this.form.username.length == 0) {
        this.$message({
          showClose: true,
          message: '请输入用户名',
          type: 'error'
        });
        return;
      }
      if (this.form.password == '' || this.form.password.length == 0) {
        this.$message({
          showClose: true,
          message: '请输入密码',
          type: 'error'
        });
        return;
      }
      login(this.form).then(res=>{
          if (res.code == 200){
              if (this.checked) {//记住我
                  localStorage.setItem("username",this.form.username);
                  localStorage.setItem("password",this.form.password);
              }
              this.$cookies.set("username",this.form.username);
              this.$cookies.set("password",this.form.password);
              this.$cookies.set("token",res.map.token);
              this.$cookies.set("cid",res.data.cid);
              this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success'
              });
              this.$router.replace("chat");
          }else {
              this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'error'
              });
          }
      }).catch(err=>{
          console.log(err);
      })
    },
    //去注册
    toRegister(){
      this.$router.replace("register")
    }
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.login {
  background-color: #fff;
  width: 430px;
  height: 450px;
  margin: 0 auto;
  margin-top: 10%;
  border-radius: 5px;
}
.title {
  font-size: 24px;
  text-align: center;
  padding-top: 50px;
}
.username {
  margin:25px 40px;
}
.forgot {
  font-size: 14px;
  margin-left: 60%;
}
.forgot:hover {
  color: #409EFF;
  cursor: pointer;
}
.register {
  margin-top: 20px;
  text-align: center;
}
.register:hover {
  color: #409EFF;
  cursor: pointer;
}
</style>
